<template>
  <el-dialog :model-value="dialogVisible" :title="$t('新增付款')" width="700" center :destroy-on-close="true"
    @close="emits('closeDialog')">
    <el-form :model="form" label-width="150px" ref="dialogFormRef" :rules="rules">
      <el-form-item :label="$t('付款金额')" prop="amount">
        <el-input v-model="form.amount" type="number" :placeholder="$t('请输入付款金额')" clearable style="width:60%;" />
        <div v-if="available.warning" class="el-form-item__error">{{ available.warning }}</div>
      </el-form-item>
      <el-form-item :label="$t('付款手续费')" v-if="available.pay_fee">
      {{ available.pay_fee }} （{{ available.pay_rate }}）
      </el-form-item>
      <el-form-item :label="$t('币种')" prop="currency">
        <el-select v-model="form.currency" :placeholder="$t('请选择币种')" @change="handleCurrency" clearable style="width:60%;">
          <el-option v-for="item in currencyList" :key="item.key" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="available.available" :label="$t('余额')">{{ available.available }}</el-form-item>
      <el-form-item :label="$t('收款客户')" prop="user_kyc_id">
        <el-select v-model="form.user_kyc_id" :placeholder="$t('请选择收款客户')" @change="handleUserKycChange" style="width:60%;">
          <el-option v-for="item in userKycIdList" :key="item.key" :label="item.label" :value="item.value">{{item.real_name}}</el-option>
        </el-select>
        <el-button type="danger" :icon="Plus" class="ml-2" @click="emits('handleGoCustomerNew')">{{ $t('新增客户') }}</el-button>
      </el-form-item>
      <el-form-item :label="$t('收款银行账号')" prop="bank_card_id">
        <el-select v-model="form.bank_card_id" :placeholder="$t('请选择收款银行账号')" style="width:60%;">
          <el-option v-for="item in bankCardIdList" :key="item.card_id" :label="item.name" :value="item.card_id"></el-option>
        </el-select>
        <el-button type="danger" :icon="Plus" class="ml-2"
          v-if="form.user_kyc_id"
          @click="emits('handleGoCustomerBank', {kyc_id: form.user_kyc_id})">{{ $t('新增银行卡') }}</el-button>
      </el-form-item>
      <div style="margin-left: 150px;">
        <p v-for="(bankT, index) in bankCardIdList" :key="index">
          <el-card class="bank-details" v-if="bankT.card_id == form.bank_card_id">
            <el-row class="mb-1 text-sm">
              <el-col :span="7">{{ $t('银行名称') }}</el-col>
              <el-col :span="17">{{ bankT.bank_name }}</el-col>
            </el-row>
            <el-row class="mb-1 text-sm">
              <el-col :span="7">{{ $t('银行地址') }}</el-col>
              <el-col :span="17">{{ bankT.bank_address }}</el-col>
            </el-row>
            <el-row class="mb-1 text-sm">
              <el-col :span="7">{{ $t('银行账号') }}</el-col>
              <el-col :span="17">{{ bankT.card_number }}</el-col>
            </el-row>
            <el-row class="mb-1 text-sm">
              <el-col :span="7">{{ $t('收款人名称') }}</el-col>
              <el-col :span="17">{{ bankT.card_name }}</el-col>
            </el-row>
            <el-row class="mb-1 text-sm" v-if="bankT.swift_code">
              <el-col :span="7">{{ $t('SWIFT码') }}</el-col>
              <el-col :span="17">{{ bankT.swift_code }}</el-col>
            </el-row>
            <el-row class="mb-1 text-sm">
              <el-col :span="7">{{ $t('币种') }}</el-col>
              <el-col :span="17">{{ bankT.currency }}</el-col>
            </el-row>
            <el-row class="mb-1 text-sm" v-if="bankT.extended">
              <el-col :span="7">{{ $t('银行补充信息') }}</el-col>
              <el-col :span="17">{{ bankT.extended }}</el-col>
            </el-row>
          </el-card>
        </p>
      </div>
      <el-form-item :label="$t('付款申请时间')" prop="pay_time">
        <el-date-picker v-model="form.createtime" type="datetime" :placeholder="$t('请选择付款申请时间')"
          style="width: 60%" />
      </el-form-item>
      <el-form-item label="" class="my-5">
        <el-button type="primary" :icon="SuccessFilled" @click="submit(form)">{{ $t('提交付款') }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { timestamp } from "@/utils/utils";
import { SuccessFilled, Plus } from '@element-plus/icons-vue'
import { getAssetBalanceApi } from "@/api/account/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dialogFormRef = ref("");
const available = ref({}); //可用余额
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  form: {
    type: Object,
    default: {
      currency: "",
      amount: "",
      user_kyc_id: "",
      bank_card_id: "",
      createtime: ""
    }
  },
  currencyList: {
    type: Array,
    default: [],
  },
  userKycIdList: {
    type: Array,
    default: [],
  },
  bankCardIdList: {
    type: Array,
    default: [],
  },
});

const rules = {
  amount: [{ required: true, message: t("请输入付款金额"), trigger: "blur" }],
  currency: [{ required: true, message: t("请选择币种"), trigger: "change" }],
  bank_card_id: [{ required: true, message: t("请选择收款银行账号"), trigger: "change" }],
  user_kyc_id: [{ required: true, message: t("请选择收款客户"), trigger: "change" }],
};

const emits = defineEmits([
  "closeDialog", "submitForm", "handleUserKycChange", 'handleGoCustomerNew', 'handleGoCustomerBank'
]);

const handleUserKycChange = (value) => {
  // console.log(value);
  emits("handleUserKycChange", value);
};
// 币种选择
const handleCurrency = async (value) => {
  const res = await getAssetBalanceApi({currency: value, order_type: 2, amount: props.form.amount});
  available.value = res;
};
// 提交
const submit = (dialogForm) => {
  // console.log("提交参数----", dialogForm);
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        // if (dialogForm.amount > available.value) {
        //   ElMessage({
        //     type: "error",
        //     message: t("余额不足"),
        //   });
        //   return;
        // }
        // console.log(timestamp(form.createtime.valueOf()));
        const param = Object.assign(dialogForm, {createtime: timestamp(dialogForm.createtime.valueOf())});
        emits("submitForm", param);
      } catch (error) {
        return false;
        //        console.log(error);
      }
    })
    .catch((error) => {
      return false;
      //      console.log(error);
    });
};
</script>
<style scoped>
.bank-details {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px 0;
  font-size: 12px;
  max-width: 600px;
  color: rgb(96, 98, 102);
}
.el-row {
  font-size:12px;
  font-weight:0;
}
.el-col-12 {
  max-width: 40%;
}</style>
